import React from 'react'
import Style from './index.scss'
import { connect } from 'react-redux'
import Avatar from '@components/avatar'
import Atlas from '@components/atlas'
import Comments from '@components/comments'

@connect(
  store => ({
    dynamicList: store.topicList
  }),
  dispatch => ({})
)
class DynamicList extends React.Component {
  render() {
    const { dynamicList } = this.props

    return (
      <div className={Style['dynamic-list']}>
        {dynamicList.map((item, index) => {
          const imageList = JSON.parse(item.topic.topicImg)
          return (
            <article className="article" key={index}>
              <header className="header">
                <Avatar userInfo={item.userInfo} />
              </header>

              <div className="container">
                <Atlas imageList={imageList} />
              </div>

              <div className="comments-content">
                <Comments
                  topicId={item.topic.topicId}
                  thumbsUp={item['thumbs_up']}
                  comments={item.comments}
                />
              </div>
            </article>
          )
        })}
      </div>
    )
  }
}

export default DynamicList
